<!--  -->
<template>
    <div class="w-full h-full bg-yellow-300 flex">
        <div class="m-6 cssTransform bg-gray-500">
            <div class="flex">
                <div class="m-6 w-50px h-50px bg-red-500" :class="color.red ? 'divTransform' : ''" @click="animaS('red')">文字测试</div>
                <div class="m-6 w-50px h-50px bg-light-50" :class="color.light ? 'divTransform' : ''" @click="animaS('light')">文字测试</div>
                <div class="m-6 w-50px h-50px bg-blue-300" :class="color.blue ? 'divTransform' : ''" @click="animaS('blue')">文字测试</div>
                <div class="m-6 w-50px h-50px bg-green-400" :class="color.green ? 'divTransform' : ''" @click="animaS('green')">文字测试</div>
                <div class="m-6 w-50px h-50px bg-purple-500" :class="color.purple ? 'divTransform' : ''" @click="animaS('purple')">文字测试</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
//css animation
import { onMounted, reactive } from 'vue';

let color = reactive<any>({
    red: false,
    light: false,
    blue: false,
    green: false,
    purple: false,
});
onMounted(() => {

});
const animaS = (name: string) => {
    color[name] = true;
};

</script>
<style lang='css' scoped>
.cssTransform {
    width: 100%;
}
.divTransform {
    /* 动画名称 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 2s;
    /* 动画速度曲线 */
    animation-timing-function: ease;
    /* 动画开始时间 */
    animation-delay: 0;
    /* 动画播放次数 */
    /* animation-iteration-count: 2; */
    /* 动画播放方向 */
    /* animation-direction: alternate; */
    /* 动画结束后状态 */
    animation-fill-mode: forwards;
}
.divTransform:hover {
    animation-play-state: paused;
}

@keyframes move {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(2);
    }
    50% {
        transform: scale(3);
    }
    75% {
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }    
}
</style>